<template>
    <div class="content-body-header">
        <img src="../../../assets/changpian.png" alt="">
        <div class="content-body-header-title">{{title}}</div>
        <div class="content-body-header-tab">
            <div class="content-body-header-tab-item" v-for='(item,index) in leftTab' :key='index'>
                <a href="">{{item}}</a>
            </div>
        </div>
        <div class="content-body-header-more">
            <a href="">更多</a>
            <img src="../../../assets/more.png" alt="">
        </div>
    </div>

</template>

<script>
    export default {
        name: 'ContentBodyHeader',
        data() {
            return {
            }
        },
        props: {
            title: {
                type: String,
                required: true
            },
            leftTab: {
                type: Array,
            }
        }
    }
</script>

<style>
    .content-body-header {
        width: 100%;
        height: 37px;
        position: relative;
        border-bottom: 2px solid #C10D0C;
    }

    .content-body-header img {
        height: 20px;
        width: 20px;
        margin-top: 8.5px;
        margin-left: 7.5px;
        float: left;
    }

    .content-body-header-title {
        height: 100%;
        line-height: 37px;
        font-size: 20px;
        color: black;
        float: left;
        margin-left: 10px;
        cursor: pointer;
    }

    .content-body-header-tab {
        color: #ccc;
        float: left;
        height: 16px;
        width: 280px;
        margin-top: 9.5px;
        margin-left: 15px;
        font-size: 10px;
        line-height: 18px;
        display: flex;
    }

    .content-body-header-tab-item {
        float: left;
        flex: 1;
        border-right: 1px solid #ccc;
        text-align: center;
    }

    .content-body-header-tab-item:last-child {
        border-right: none;
    }

    .content-body-header-tab-item a {
        color: #666;
        text-decoration: none;
    }

    .content-body-header-tab-item a:hover {
        text-decoration: underline !important;
    }

    .content-body-header-more {
        width: 100px;
        height: 100%;
        float: left;
        position: absolute;
        right: 0;
        font-size: 10px;
        line-height: 40px;
        text-align: center
    }
    .content-body-header-more a{
        color: #666;
        text-decoration: none;
    }
    .content-body-header-more a:hover{
        text-decoration: underline !important;
    }
    .content-body-header-more img{
        height: 12px;
        width: 12px;
        position: absolute;
        right: 19px;
        top: 6px;
    }
</style>